{% extends "base_list.html" %}

{% block more_filter -%}
{%- endblock more_filter %}

{% block list_body %}
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="row mbh">


                    </div>

                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover" id="dataTables2">
                            <thead>
                            <tr>
                                <th>分类</th>
                                <th>大关名称</th>
                                <th>小关总数</th>
                                <th>操作</th>

                            </tr>
                            </thead>
                            <tbody id="id-list">
                            {% for line in leveldata %}
                                <tr>
                                    <td>{% if line.type %}   随堂游戏{% else %} 课后乐园{% endif %}</td>
                                    <td>{{ line.name }}</td>
                                    <td>{{ line.sublevel_sum }}</td>
                                    {#                                    此处保存该大关的编号，查询属于该大关的所有小关#}
                                    <td><a class="btn btn-primary" href="edit/?lid={{ line.seq }}">编辑</a></td>
                                </tr>
                            {% endfor %}

                            </tbody>
                        </table>
                    </div>
                    <!-- /.dataTable_wrapper -->
                </div>
                <!-- /.panel-body -->
            </div>
            <!-- /.panel -->
        </div>
    </div> <!-- /.row -->
{% endblock list_body %}

{% block body_js %}
    <script type="text/javascript">
        $(document).ready(function () {
            var table = $('#dataTables').dataTable({
                "dom": 'ltpr',
                "language": {
                    "url": "{{ static('lib/js/dataTable.Chinese.json') }}"
                },
                "responsive": true,
                "lengthChange": false,
                "serverSide": true,
                "ajax": {
                    url: "/musicballoon/datatable/",
                    type: "POST",
                    data: {
                        csrfmiddlewaretoken: "{{ csrf_token }}",
                    },
                },
                "columns": {{ list_fields.to_json()|safe }},
                "searchCols": [
                    {% for col in list_fields.to_list() -%}
                        {% if col.name in searches -%}
                            {{ searches[col.name]|jsonify|safe }},
                        {% else %}
                            null,
                        {%- endif %}
                    {%- endfor %}
                ],
                "columnDefs": [],
                "order": [[1, 'desc']],
                "processing": true,
                "deferRender": true,
                {#
                {% if not searches -%}
                "deferLoading": true,
                {%- endif %}
                #}
                "pageLength": 10,
            });


            $('#function').change(function () {
                var $selAll = $('#select-allpage');
                if ($(this).val() == 'set_refunded') {
                    $selAll.removeAttr('checked');
                    $selAll.attr('disabled', 'disabled');
                } else {
                    $('#select-allpage').removeAttr('disabled');
                }
            });
            //=== search click ===
            $("#id-search-btn").on("keyup click", function () {
                search();
            });

            $("#id-th-checkbox").on("change", function () {
                $("#id-list").find("input[type=checkbox]").prop("checked", $(this).prop("checked"));
            });


            $("#select-allpage").on("click", function () {
                $("#id-th-checkbox").prop("checked", $("#select-allpage").prop("checked"));
                $("#id-list").find("input[type=checkbox]").prop("checked", $("#select-allpage").prop("checked"));
            });

        });
    </script>

{% endblock %}
